﻿<template>
  <div class="nsw-container">
    <div class="left">
      <el-menu  :default-active="$route.path" router select="selectMenu">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>我的服装设计</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/person/auth" route="/person/auth" >认证申请</el-menu-item>
            <el-menu-item index="/person/auth1" route="/person/authNotice" >认证信息</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/person/info" route="/person/info" >个人信息</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/person/account" route="/person/account" >个人设置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

<!--        <el-submenu index="3">-->
<!--          <template slot="title">-->
<!--            <i class="el-icon-user"></i>-->
<!--            <span>我的钱包</span>-->
<!--          </template>-->
<!--          <el-menu-item-group>-->
<!--            <el-menu-item index="/person/payment/rest" route="/person/rest" >余额</el-menu-item>-->
<!--          </el-menu-item-group>-->
<!--          <el-menu-item-group>-->
<!--            <el-menu-item index="/person/payment/topUp" route="/person/income" >收入</el-menu-item>-->
<!--          </el-menu-item-group>-->
<!--          <el-menu-item-group>-->
<!--            <el-menu-item index="/person/payment/topUp" route="/person/topUp" >充值</el-menu-item>-->
<!--          </el-menu-item-group>-->
<!--        </el-submenu>-->
        <el-submenu index="3">
          <template slot="title">
            <svg t="1687827151539" class="icon" style="margin-right: 6px;padding-left: 2px" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2439" width="22" height="22"><path d="M832.349727 404.983607v213.133489H576.549571c-58.754098 0-106.616706-47.862607-106.616706-106.616706S517.795472 404.983607 576.549571 404.983607h255.800156m42.666666-42.566745H576.549571c-82.435597 0-149.18345 66.847775-149.183451 149.18345 0 82.435597 66.847775 149.18345 149.183451 149.183451h298.466822V362.416862z" p-id="2440" fill="#515151"></path><path d="M832.349727 788.683841c0 23.481655-19.08509 42.666667-42.666667 42.666666H235.516003c-23.481655 0-42.666667-19.08509-42.666667-42.666666V234.516784c0-23.481655 19.08509-42.666667 42.666667-42.666667h554.266979c23.481655 0 42.666667 19.08509 42.666667 42.666667v127.900078h42.666666v-127.900078c0-47.063232-38.17018-85.233411-85.233411-85.233412H235.516003c-47.063232 0-85.233411 38.17018-85.233411 85.233412v554.266979c0 47.063232 38.17018 85.233411 85.233411 85.233411h554.266979c47.063232 0 85.233411-38.17018 85.233411-85.233411v-127.900078H832.349727v127.800156z" p-id="2441" fill="#515151"></path><path d="M576.549571 511.600312m-21.283373 0a21.283372 21.283372 0 1 0 42.566745 0 21.283372 21.283372 0 1 0-42.566745 0Z" p-id="2442" fill="#515151"></path></svg>
            <span>个人钱包</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/person/balance" route="/person/balance" >余额</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/person/recharge" route="/person/recharge" >充值</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/person/withdrawal" route="/person/withdrawal" >提现</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/person/income" route="/person/income" >收入</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/person/expenditure" route="/person/expenditure" >支出</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/person/bill" route="/person/bill" >账单</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-submenu index="3.1"  ><template slot="title">银行卡</template>
              <el-menu-item index="/person/bankCard" route="/person/bankCard" >新增银行卡</el-menu-item>
              <el-menu-item index="/person/bankCard2" route="/person/bankCard2" >我的银行卡</el-menu-item>
            </el-submenu>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="right">
      <el-card class="box-card" shadow="always">
        <keep-alive >
          <router-view :key="key" />
        </keep-alive>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Person",
  data() {
    return {
      isCollapse: true
    };
  },
  methods: {
    selectMenu(index,indexPath){
      console.log(index, indexPath);
    }
  },
  computed: {
    key() {
      return this.$route.path;
    },
  },
}
</script>

<style scoped>
.nsw-container{
  width: 100%;
  height: calc(100vh);
  display: flex;
}
.left{
  width: 20%;
  height: 100%;
  border-right: solid 1px #e6e6e6;
  overflow: auto;
}
.right{
  width: 80%;
  height: 100%;
}
.box-card{
  height: 95%;
  margin: 1%;
}

</style>
